<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    <h2 class="sub-header">我的联系人</h2>
    <div class="table-responsive">
        <!-- Single button -->
        <div class="btn-group">
            <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
                aria-expanded="false">
                所有 <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="javascript:;" (click)="tagId=0">所有</a></li>
                <li role="separator" class="divider"></li>
                <!-- ng-template标签中使用*ngFor -->
                <ng-template ngFor let-val let-indexs="index" [ngForOf]="tagList">
                    <li><a href="javascript:;" (click)="tagId=val.id">{{val.name}}</a></li>
                    <li role="separator" class="divider"></li>
                </ng-template>
            </ul>
        </div>
        <a class="btn btn-success pull-right" routerLink="/contactadd">新增联系人</a>
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>邮箱</th>
                    <th>电话</th>
                    <th>标签</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let item of contactList; index as i; trackBy i; let firstItem=first; let lastItem=last">
                    <td>
                        {{item.name}}
                        <!-- <span class="badge" *ngIf="firstItem">{{item.id}}</span>
                        <span *ngIf="i==1" class="badge">NO.2</span>
                        <span class="badge" *ngIf="lastItem">{{item.id}}</span> -->
                    </td>
                    <td>{{item.email}}</td>
                    <td>{{item.tel}}</td>
                    <!-- 自定义管道(过滤器) -->
                    <td><span [ngClass]="['label','label-info']">{{item.tagId | tag}}</span></td>
                    <td>
                        <a class="btn  btn-xs btn-warning" [routerLink]="['/contactedit',item.id]">编辑</a>&nbsp;
                        <a class="btn  btn-xs btn-danger" href="javascript:;" (click)="contactDel(item.id)">删除</a>
                    </td>
                </tr>

            </tbody>
        </table>
    </div>
</div>